<script lang='ts'>
import { defineComponent, ref, reactive, onBeforeMount, watch, defineEmits } from 'vue'
export default defineComponent({
    name: "JxtechImport"
})
</script>
<script lang="ts" setup>
import { ElNotification } from 'element-plus'
import { Upload } from '@element-plus/icons'
import { getAccessToken } from '/@/utils/common'
const emit = defineEmits<{
    (e: 'importSuccess', response: any, file: any, fileList: any): void
    (e: 'importError', err: any, file: any, fileList: any): void
}>()
const jxtechImportUploadRef = ref()

const props = defineProps({
    action: {
        // 接口
        type: String
    },
    // 额外数据
    extraData: {
        type: Object
    },
    //导入框的文字标题
    tips: {
        type: [String, Number],
        default: "上传填写好的数据表"
    },
    description: {
        type: [String, Number],
        default: "文件后缀名必须为xls 或xlsx(即Excel格式),文件大小不得大于10M,最多支持导入10000条数据"
    }

})
const jxtechImportState = reactive({
    active: 0,
    fileList: [],
    fileName: '选择文件',
    btnDisabled: true,
    // 三步状态判断
    status1: '',
    status2: '',
    status3: '',
    title3: '导入完成',
    percentage: 0,
    progressColor: '#21ba45',
    headers: { 'Authorization': '' },
    beforeUpload: (file: any) => {
        if (file.type !== "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet") {
            ElNotification({
                title: '错误',
                message: '文件导入格式限制',
                type: 'error',
            })
            jxtechImportState.status2 = "error"
            return false
        }

    },
    onsubmit: () => {
        if (jxtechImportState.fileList.length > 0) {
            jxtechImportState.active = 1
            jxtechImportUploadRef.value.submit()
        }
    },
    onChange: (file: any, fileList: any) => {
        if (jxtechImportState.fileName !== file.name) {
            jxtechImportState.title3 = "导入完成"
            jxtechImportState.status2 = "wait"
            jxtechImportState.status3 = "wait"
            jxtechImportState.percentage = 25
            jxtechImportState.progressColor = "#21ba45"
        }

        jxtechImportState.fileName = file.name
        fileList = []
        fileList.push(file)
        jxtechImportState.fileList = fileList
        jxtechImportState.fileList.length === 0 ? jxtechImportState.btnDisabled = true : jxtechImportState.btnDisabled = false
        if (jxtechImportState.status3 == '') {
            jxtechImportState.percentage = 25
        }
    },
    onSuccess: (response: any, file: any, fileList: any) => {
        console.log(response)
        jxtechImportState.active = 3
        jxtechImportState.percentage = 100
        jxtechImportState.title3 = "导入成功"
        ElNotification({
            title: '成功',
            message: response,
            dangerouslyUseHTMLString: true,
            type: 'success',
        })
        emit("importSuccess", response, file, fileList)
    },
    onError: (err: any, file: any, fileList: any) => {
        jxtechImportState.active = 3
        jxtechImportState.title3 = "导入失败"
        jxtechImportState.progressColor = "#db2828"
        jxtechImportState.status2 = "error"
        jxtechImportState.status3 = "error"
        jxtechImportState.percentage = 100
        const message = JSON.parse(err.message).message
        ElNotification({
            title: '错误',
            message: message || '导入失败',
            type: 'error'
        })
        emit("importError", err, file, fileList)
    },
    onProgress: (e: any) => {
        jxtechImportState.percentage = 25 + (e.percent) / 2
    }
})
watch(() => jxtechImportState.fileList.length, () => {
    jxtechImportState.fileList.length === 1 ? jxtechImportState.active++ : ""
})
onBeforeMount(() => {
    //写入token
    let token = getAccessToken()
    jxtechImportState.headers['Authorization'] = "bearer " + token
})

</script>
<template>
    <div class="jxtech-import-container">
        <el-progress
            :text-inside="true"
            :stroke-width="4"
            :percentage="jxtechImportState.percentage"
            :color="jxtechImportState.progressColor"
            status="warning"
            class="jxtech-import-progress"
        >
            <span></span>
        </el-progress>
        <el-steps
            :active="jxtechImportState.active"
            align-center
            finish-status="success"
            class="import-steps"
        >
            <el-step title="选择文件"></el-step>
            <el-step
                title="导入数据"
                :status="jxtechImportState.status2"
                :description="jxtechImportState.percentage + '%'"
            ></el-step>
            <el-step :title="jxtechImportState.title3" :status="jxtechImportState.status3"></el-step>
        </el-steps>
        <el-upload
            ref="jxtechImportUploadRef"
            drag
            :show-file-list="false"
            :headers="jxtechImportState.headers"
            :multiple="false"
            :action="props.action"
            :data="props.extraData"
            name="files"
            accept=".xls, .xlsx"
            :limit="2"
            :auto-upload="false"
            :file-list="jxtechImportState.fileList"
            :on-change="jxtechImportState.onChange"
            :on-success="jxtechImportState.onSuccess"
            :on-error="jxtechImportState.onError"
            :on-progress="jxtechImportState.onProgress"
            :before-upload="jxtechImportState.beforeUpload"
        >
            <div class="jxtech-import_select-area">
                <div class="jxtech-import_select-icon">
                    <jxtech-svg-icon icon="#icon-shangchuan4" :size="66"></jxtech-svg-icon>
                </div>
                <div class="jxtech-import_select-description">
                    <slot name="description">
                        <h3>{{ tips }}</h3>
                        <p>{{ description }}</p>
                        <span>{{ jxtechImportState.fileName }}</span>
                    </slot>
                </div>
            </div>
        </el-upload>
        <slot name="alert">
            <el-alert
                title="特别提示"
                type="warning"
                description="导入过程中如发现同名客户，且对该客户数据有更新权限，则更新这条客户数据"
                show-icon
                :closable="false"
                effect="light"
            ></el-alert>
        </slot>

        <el-divider></el-divider>
        <div class="jxtech-import_upload-footer">
            <el-button
                type="primary"
                :icon="Upload"
                @click="jxtechImportState.onsubmit"
                class="jxtech-import_upload-btn"
                :disabled="jxtechImportState.btnDisabled"
            >导入</el-button>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.jxtech-import-container {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 20px;
    ::v-deep(.el-steps) {
        margin: 20px auto;
    }
    .jxtech-import-progress {
        position: absolute;
        top: 50px;
        left: 50%;
        transform: translateX(-50%);
        width: 62%;
    }
    .import-steps {
        ::v-deep(.el-step__line) {
            background-color: unset;
        }
    }
    .jxtech-import_select-area {
        height: 180px;
        width: 100%;
    }
    .jxtech-import_select-icon {
        width: 16%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #eee;
        border-right: 1px dashed #d9d9d9;
        float: left;
    }
    .jxtech-import_upload-footer {
        height: 30px;
        display: flex;
        justify-content: end;
        align-items: center;
    }
    .jxtech-import_select-description {
        width: 84%;
        height: 100%;
        float: left;
        text-align: left;
        padding: 30px;
        > h3 {
            color: #494949;
        }
        > p {
            margin: 30px auto;
            color: #bbb;
        }
        > span {
            color: #1891ff;
            &:hover {
                text-decoration: underline;
            }
        }
    }

    ::v-deep(.el-upload) {
        height: 180px;
        width: 100%;
        margin: 20px auto;
    }

    ::v-deep(.el-upload-dragger) {
        height: 180px;
        width: 100%;
    }
    ::v-deep(.el-alert) {
        height: 100px;
    }
    ::v-deep(.el-step__head .is-success .el-step__line) {
        color: aqua;
        background-color: aqua;
    }
}
::v-deep(.el-dialog__title) {
    font-weight: 700;
    font-style: normal;
    font-size: 16px;
    text-align: left;
    color: #666666;
}
</style>
